<template>
    <rx-dialog @ok="onOk" @cancel="cancel">
        <rx-layout>
            <template #middle>
                <a-form ref="form" :model="mdl">
                    <a-form-item :label="i18n('renderMethod','渲染方式')" name="mode">
                        <a-radio-group v-model:value="mdl.mode">
                            <a-radio value="field">{{i18n("field","字段映射")}}</a-radio>
                            <a-radio value="dic">{{i18n("dic","数据字典")}}</a-radio>
                            <a-radio value="sql">SQL</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <div v-if="mdl.mode=='sql'">
						<a-row >
                            <a-col :span="12">
                                <a-form-item :label='i18n("dataSource","数据源")' name="dataSource" >
                                    <a-select style="width: 100%;" v-model:value="mdl.dataSource" :options="dataSources"  :getPopupContainer="(p)=>p.parentNode" allowClear ></a-select>
                                </a-form-item>
                            </a-col>
						</a-row>
						<a-row>
                            <a-col :span="24">
                                <a-form-item label="SQL" name="sql" >
                                    <div style="height:300px;">
                                        <RxVueMonaco
                                            ref="sql"
                                            :value="mdl.sql"
                                            language="sql"
                                            class="monacoEditor"
                                            @change="valueChange"
                                        >
                                            <template #toolbar>
                                                <a-dropdown>
                                                    <a-button @click="executeSql(mdl.sql)" style="margin-left: 8px">{{i18n("execute","执行")}}</a-button>
                                                </a-dropdown>
                                            </template>
                                        </RxVueMonaco>
                                    </div>
                                </a-form-item>
                            </a-col>
						</a-row>
						<a-row>
							<a-col :span="12">
								<a-form-item :label='i18n("whereField","条件字段")' name="whereField" >
									<a-select style="width: 100%;" v-model:value="mdl.whereField" :options="fields"
											  :getPopupContainer="(p)=>p.parentNode" allowClear ></a-select>
								</a-form-item>
							</a-col>
							<a-col :span="12">
								<a-form-item :label='i18n("renderingField","渲染字段")' name="renderingField" >
									<a-select style="width: 100%;" v-model:value="mdl.renderingField" :options="fields"
											  :getPopupContainer="(p)=>p.parentNode" allowClear ></a-select>
								</a-form-item>
							</a-col>
						</a-row>
					</div>
					<div v-if="mdl.mode=='field'">
						<a-row>
                            <a-col :span="12">
                                <a-form-item :label='i18n("renderingField","渲染字段")' name="fieldRender">
                                    <a-select  v-model:value="mdl.fieldRender" :getPopupContainer="(p)=>p.parentNode" allowClear >
                                        <a-select-option v-for="(field,index) in dimensions" :value="field.value" :key="index" :title="field.value">{{field.label}}</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
						</a-row>
					</div>
					<div v-if="mdl.mode=='dic'">
						<a-row>
                            <a-col :span="12">
                                <a-form-item name="dicKey" :label='i18n("dataDicItem","数据字典项")'>
                                    <a-tree-select v-model:value="mdl.dicKey"  :treeData="dicTree" :getPopupContainer="(p)=>p.parentNode"></a-tree-select>
                                </a-form-item>
                            </a-col>
						</a-row>
					</div>
                </a-form>
            </template>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {Util, RxVueMonaco,RxDialog,RxLayout} from '@lowcode/jpaas-base-lib';
import ScreenDataModelApi from "@/api/screen/core/screen-data-model.js";
import ScreenApi from "@/api/screen-api";
import {mapState} from 'pinia';
import useMain from "../../../../stores/use-main";

export default {
    name: "field-render-setting",
    computed: {
        ...mapState(useMain, ["appId"])
    },
    props: {
        fieldSetting:{
            type:Object
        },
		modelConfig:{
            type:Object
        },
        destroy: {
            type: Function
        },
    },
    components: {
        RxVueMonaco,
        RxDialog,
        RxLayout
    },
    data() {
        return {
            mdl:{
				mode:"field",
                dataSource:"",
                sql:"",
                whereField:"",
                renderingField:"",
				fieldRender:"",
            },
            fields:[],
            dataSources:[],
			dimensions: [],
            dicTree: [],
        }
    },
    created() {
        if(this.fieldSetting.renderSetting){
            this.mdl=this.fieldSetting.renderSetting;
            //数据兼容
            if(!this.mdl.mode){
				this.mdl.mode="sql";
			}
        }
        if(this.mdl.sql){
            this.getFields(this.mdl.sql);
        }
		this.loadDicTree();
        this.getDataSources();
        this.getDimensions();
    },
    methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"dialogLang.fieldRenderLang",key);
		},
        onOk(){
            Util.closeWindow(this, "ok",this.mdl);
        },
        cancel(){
            Util.closeWindow(this, "cancel");
        },
        //获取字段
        getFields(sql){
            if(sql){
                this.fields=[];
				ScreenDataModelApi.getFields({sql: sql, ds: this.mdl.dataSource}).then(res => {
                    if(res){
                        for (let i = 0; i < res.length; i++) {
                            this.fields.push({
                                value:res[i].fieldName,
                                label:res[i].fieldLabel
                            })
                        }
                    }
                });
            }
        },
        //获取数据源
        getDataSources(){
			ScreenDataModelApi.getAllByAppName().then(res=>{
                if(res){
                    this.dataSources=[];
                    for (let i = 0; i < res.length; i++) {
                        this.dataSources.push({
                            label:res[i].name,
                            value:res[i].alias
                        })
                    }
                }
            });
        },
		//执行sql 获取字段
		executeSql(sql){
			this.getFields(sql);
		},
		//获取所有维度字段
		getDimensions(){
			this.dimensions=[];
        	if(!this.modelConfig ||  !this.modelConfig.dimensions){
        		return;
			}
			for (let i = 0; i < this.modelConfig.dimensions.length; i++) {
				let dimension=this.modelConfig.dimensions[i];
				for (let j = 0; j < dimension.fields.length; j++) {
					let field=dimension.fields[j];
					let value=dimension.tableName+"_"+field.fieldName;
					this.dimensions.push({
						value:value,
						label:field.fieldLabel
					})
				}
			}
        },
		loadDicTree(){
            ScreenApi.listDicTree(this.appId).then(res => {
				let cloneData = [];
				res.forEach(function(item) {
					cloneData.push({
						title: item.name,
						key: item.treeId,
						value: item.alias,
						parentId: item.parentId
					})
				})
				let treeData=Util.listToTree(cloneData,"key","parentId");
				this.dicTree = treeData;
			})
		},
        valueChange(value) {
            this.mdl.sql = value;
        }
    }
}
</script>

<style scoped>

</style>
